<template>
	<!-- 高度>=100vh -->
	<!-- 顶部固定 -->
	<!-- 内容部分自适应窗口高度 -->
	<view class="nav-content-container" :class="{'auto-height': !fixedHeight}"
		:style="{background: background,minHeight:'calc(100vh - ' + navHeight + 'px);'} ">
		<view class="header-container">
			<slot name="header"></slot>
		</view>
		<view class="main-container">
			<view class="main-slot-container">
				<slot></slot>
			</view>
		</view>
		<view class="footer-container">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			fixedHeight: { // 页面中存在swiper 通常需要固定高度
				type: Boolean,
				default: true
			},
			background: {
				type: String,
				default: () =>"#fff"
			},
			ifNav: {
				type: Boolean,
				default: true
			},
			height:{
				type: Number,
				default: () =>0
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
			systemInfo() {
				return this.$store.state.app.systemInfo
			}
		},
		watch: {
			systemInfo: {
				handler(systemInfo) {
					if (this.ifNav) {
						const navigationBarHeight = systemInfo?.system == "ios" ? 44 : 48
						this.navHeight = systemInfo?.statusBarHeight + navigationBarHeight
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				navHeight: 0,
			}
		}
	}
</script>

<style lang="scss">
	.nav-content-container {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
	}

	.nav-content-container.auto-height {
		min-height: auto;
	}

	.nav-content-container {

		.header-container,
		.footer-container {
			flex-grow: 0;
			flex-shrink: 0;
		}

		.main-container {
			display: flex;
			flex: 1 1 auto;
			align-items: stretch;
			position: relative;

			.main-slot-container {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 1;
			}
		}
	}
</style>
